<template>
  <div class="table">
    <div class="search">
      <a-card style="width: 100%;">
        <FormParsing
          :columns="searchColumn"
          :options="searchOptions"
          @submit="searchSubmit"
          v-model="searchModel"
        ></FormParsing>
      </a-card>
    </div>
    <div>
      <div class="add">
        <a-button type="primary" @click="add">新增</a-button>
        <div class="reload">
          <RedoOutlined :style="{ fontSize: '20px' }" />
        </div>
      </div>
      <a-table
        v-bind="options"
        :dataSource="data"
        :columns="tabColumns"
        @change="pageChange"
      >
        <template
          style="display: flex;"
          #action="{ record }"
          v-if="options.actionColumn"
        >
          <div v-if="options.actionColumn && options.editAdel">
            <span>
              <a @click="edit(record)">编辑</a>
            </span>
            <a-divider type="vertical" />
            <span>
              <a @click="del(record)">删除</a>
            </span>
          </div>
          <slot name="action" :record="record"> </slot>
        </template>
      </a-table>
    </div>
    <div class="model">
      <a-modal
        :width="width"
        :footer="false"
        :visible="visible"
        :title="modalTitle"
        @update:visible="changeVisible"
      >
        <FormParsing
          :columns="fromColum"
          :options="formOptions"
          v-model="addFromModel"
          @submit="addFromEmit"
        ></FormParsing>
      </a-modal>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, ref, onMounted, Prop } from "vue";
import { RedoOutlined } from "@ant-design/icons-vue";
import FormParsing from "../../FormParsing/src/FormParsing.vue";
import { options } from "./type";
import { useDTable, useModel } from "./d-table-hook";
interface tabColumns {
  title?: string;
  dataIndex?: string;
  key?: string;
  slots?: object;
}

export default defineComponent({
  props: {
    //配置表格的其他一些内容
    options: {
      type: Object as PropType<options>,
      default: {
        action: false,
        editAdel: false,
      },
    },
    //表格基本的数据
    data: {
      type: Array,
      default: () => [],
    },
    //配置展示表格展示字段，以及表格搜索显示内容
    columns: {
      type: Array as PropType<Array<tabColumns>>,
      default: () => [],
    },
    formOptions: {
      type: Object as PropType<options>,
    },
    searchOptions: {
      type: Object as PropType<options>,
    },
    width: {
      type: Number,
      default: 800,
    },
    visible:{
      type:Boolean,
      default:false
    }
  },
  name: "DTable",
  components: { RedoOutlined, FormParsing },
  setup(props, { emit }) {
    //搜索表单model
    let searchModel = ref<Object>({});
    //定义model弹框是否展示
    //表示当前表单的状态是add 还是 edit
    let state = ref<string>("add");
    let modalTitle = ref<string>("添加");
    // let visible = ref<Boolean>(false);
    //当前表格定义的columns
    let columns = computed(() => {
      //判断传的是单个column 还是options里面的
      if (props.options?.columns) {
        return props.options?.columns;
      }
      if (props.columns) {
        return props.columns;
      }
    });
    const tabColumns = computed(() => {
      let tab: Array<object> = [];
      columns.value?.forEach((v: any) => {
        if (!v.hidden) {
          let co = {
            title: v.label,
            dataIndex: v.prop,
            key: v.prop,
          };
          tab.push(co);
        }
      });
      return tab;
    });
    // 如果允许有操作的列，那么就新增操作的列
    if (props.options?.actionColumn) {
      tabColumns?.value?.push({
        title: "操作",
        key: "action",
        slots: { customRender: "action" },
      });
    }
    //找到定义表格显示的数据 取到的值 用于渲染搜索表单和添加表单
    let [searchColumn, fromColum] = computed<any>(() => {
      const searchColum: any = [];
      const fromColum: any = [];
      columns.value?.forEach((v: any) => {
        if (v && v.search) {
          searchColum.push(v);
        }
        if (v) {
          fromColum.push(v);
        }
      });
      return [searchColum, fromColum];
    }).value;
    //最初的对象，根据column生成的对象
    const initialModel: any = computed(() => {
      let mo: any = {};
      fromColum.value?.forEach((v: any) => {
        if (v.type === "select" && v.mode === "multiple") {
          mo[v.prop] = [];
        } else {
          if (!v.hidden) mo[v.prop] = "";
        }
      });
      return mo;
    });
    const { ctsearchModel, ctfromModel } = useModel();
    const changeVisible = (v:any)=>{
      console.log(111,v)
      emit('update:visible',v)
    }
    // column的基本赋值
    searchModel.value = ctsearchModel(searchColumn);
    //创建新增表单里面的值和model 不能和搜索的一样，不然改变了都会被替换
    const addFromModel = ref(ctfromModel(fromColum));
    const { pageChange, searchSubmit, addFromEmit, edit, add, del } = useDTable(
      emit,
      changeVisible,
      addFromModel,
      initialModel.value,
      state
    );
    return {
      changeVisible,
      searchColumn,
      fromColum,
      searchModel,
      addFromModel,
      columns,
      modalTitle,
      pageChange,
      searchSubmit,
      addFromEmit,
      edit,
      add,
      del,
      tabColumns,
    };
  },
});
</script>
<style scoped>
.add {
  padding-top: 20px;
  padding-bottom: 5px;
  display: flex;
}
.add .reload {
  height: 30px;
  line-height: 33px;
  padding-left: 10px;
  cursor: pointer;
}
</style>
